import React ,{
    PureComponent
} from 'react';

import {
    View,
    StyleSheet,
    BackHandler,
    TouchableWithoutFeedback
} from 'react-native';

import * as Animated from 'react-native-animatable';

import {
    Direction
} from './index'

import {
    slideOutDown,
    sliderOutLeft,
    sliderOutRight,
    sliderOutUp
} from './animation';

interface Props {
    show: boolean,
    onShown: Function,
    onClosed: Function,
    onPressMask: Function,
    direction: Direction,
    onBackPress:Function
}

class Container extends PureComponent<Props> {
    _width:number = 0;
    _height:number = 0;

    static defaultProps = {
        show: false,
        direction: 'center',
        onShown: () => null,
        onClosed: () => null,
        onPressMask: () => null,
        onBackPress:() => null
    }

    componentDidMount() {
        BackHandler.addEventListener(
            'hardwareBackPress',
            this.hardwareBackPress
        )
    }

    componentWillUnmount() {
        BackHandler.removeEventListener(
            'hardwareBackPress',
            this.hardwareBackPress
        )
    }

    private hardwareBackPress = () => {

        const {
            onBackPress
        } = this.props;

        return onBackPress() || false;
    }

    get animationIn() {
        const {
            direction
        } = this.props;

        switch (direction) {
            case 'none' : {
                return 'fadeIn'
            }
            case 'center' : {
                return `zoomIn`;
            }
            case 'top' : {
                return 'fadeInDown';
            }
            case 'bottom': {
                return 'fadeInUp';
            }
            case 'left': {
                return 'fadeInLeft'
            }
            case 'right': {
                return 'fadeInRight'
            }
        }
    }

    get animationOut() {
        const {
            direction
        } = this.props;

        switch (direction) {
            case 'none' : {
                return 'fadeOut'
            }
            case 'center' : {
                return `zoomOut`;
            }
            case 'top' : {
                return sliderOutUp(this._height);
            }
            case 'bottom': {
                return slideOutDown(this._height);
            }
            case 'left': {
                return sliderOutLeft(this._width);
            }
            case 'right': {
                return sliderOutRight(this._width);
            }
        }
    }

    onPressMask = () => {
        const {
            onPressMask
        } = this.props;
        onPressMask();
    }

    onAnimationEnd = () => {
        const {
            show,
            onShown,
            onClosed
        } = this.props;
        if (show) {
            onShown();
        }
        else {
            onClosed();
        }
    }

    onLayout = ({nativeEvent}:any) => {
        const {
            layout
        } = nativeEvent;

        const {
            width,
            height
        } = layout;

        this._width = width;
        this._height = height;
    }

    get containerStyle() {
        const {
            direction
        } = this.props;

        const _styles = [
            styles.container
        ]

        switch (direction) {
            case 'none' : {
                _styles.push(styles.center)
            };break;
            case 'center' : {
                _styles.push(styles.center)
            };break;
            case 'bottom': {
                _styles.push(styles.bottom)
            };break;
            case 'left': {
                _styles.push(styles.left)
            };break;
            case 'right': {
                _styles.push(styles.right)
            };break;
        }
        return _styles;
    }

    get contentStyle() {
        const _styles = [
            styles.content
        ]

        const {
            direction
        } = this.props;

        switch (direction) {
            case 'none' : {
                _styles.push(styles.contentCenter)
            };break;
            case 'center' : {
                _styles.push(styles.contentCenter)
            };break;
            case 'bottom': {
                _styles.push(styles.contentBottom)
            };break;
            case 'left': {
                _styles.push(styles.contentLeft)
            };break;
            case 'right': {
                _styles.push(styles.contentRight)
            };break;
        }
        return _styles;
    }

    render() {
        const {
            show,
            children
        } = this.props;
        return (
            <Animated.View
                duration={300}
                useNativeDriver={true}
                style={this.containerStyle}
                onAnimationEnd={this.onAnimationEnd}
                animation={show ? this.animationIn : this.animationOut}
            >
                <TouchableWithoutFeedback onPress={this.onPressMask}>
                    <View style={StyleSheet.absoluteFill}/>
                </TouchableWithoutFeedback>
                <View
                    children={children}
                    onLayout={this.onLayout}
                    style={this.contentStyle}
                />
            </Animated.View>
        )
    }
}

export default Container;

const styles: any = StyleSheet.create({
    container: {
        flex: 1
    },
    content: {
        overflow: `hidden`
    },
    center: {
        justifyContent: `center`
    },
    bottom: {
        justifyContent: `flex-end`
    },
    contentCenter: {
        width: `100%`
    },
    contentBottom: {
        width: `100%`
    },
    left: {
        alignItems: `flex-start`
    },
    contentLeft: {
        height: `100%`
    },
    right: {
        alignItems: `flex-end`
    },
    contentRight: {
        height: `100%`
    }
})

